블로그_04_취약점 패치 및 다크모드 개선

React 19 보안 취약점 패치

취약점 문제

2025년 12월 기준, React 19의 RSC(React Server Components)에서 여러 보안 취약점이 발견되었다.
CVE-2025-55182를 포함한 4개의 취약점 패치, 관련 정보는 CVE-2025-55182_React2Shell 취약점을 참고한다.

조치 사항

• React 19.2.1 → 19.2.3 업데이트
• npm install react@latest react-dom@latest 실행
• 빌드 테스트 및 호환성 점검 완료
• 모든 의존성 정상 작동 확인

다크모드 개선

컬러 팔레트 통일

• 기존에 혼용되던 gray 계열을 slate 계열로 통일
• 강조색으로 cyan-400, cyan-500 사용
• 배경: slate-800 (카드), slate-900 (사이드바, 아이콘 배경)
• 텍스트: slate-100 (주요), slate-400 (보조), slate-500 (음소거)

적용 컴포넌트

• 사이드바 (Sidebar.tsx): 배경 및 아이콘 호버 상태
• 검색 모달 (SearchModal.tsx): 입력창, 결과 리스트, 푸터
• 목차 (FloatingTOC.tsx): 패널 배경, 텍스트, 인디케이터
• 토글 버튼 (DarkModeToggle.tsx, FontSizeToggle.tsx): 호버 및 활성 상태
• 백링크 (Backlinks.tsx): 카드 배경, 타이틀
• 태그 (TagCard.tsx): 배지 및 링크 색상
• 노트/블로그 페이지: 타이틀, 태그 배지

코드 블록 다크모드

• globals.css에 highlight.js 오버라이드 스타일 추가
• 다크모드에서 코드 블록 배경색을 slate-800로 변경
• 키워드, 문자열, 함수명 등에 시인성 높은 색상 적용

FOUC 방지

• layout.tsx에 인라인 스크립트 추가
• 페이지 로드 시 localStorage에서 테마 설정을 즉시 읽어 dark 클래스 적용
• hydration 전 잠깐 라이트 모드가 보이는 현상(FOUC) 해결

홈 페이지 레이아웃 개편

Stats 섹션 개선

• 기존 최근 활동 카드를 전체 포스트 카드로 변경
• 전체 노트와 동일한 형태로 블로그 저널 정보 표시
• 각각 최근 3개 항목 링크 제공

GitHub 스타일 활동 그래프

• YearlyContributionGraph.tsx 추가
• 53주(1년) 그리드 표시
• 월 라벨 (Jan ~ Dec) 및 요일 라벨 (Mon, Wed, Fri)
• 연도 선택 버튼 (2024, 2025, 2026)
• Less ~ More 범례
• 호버 시 해당 날짜의 contributions 수 표시

마진 통일

• 모든 섹션 간격을 space-y-6으로 통일
• 카드와 그래프 사이 간격 균일화

폰트 크기 토글 버그 수정

문제

• 상세 페이지에서 S/L 토글이 작동하지 않음
• PostArticle.tsx에 prose-sm이 하드코딩되어 있었음

해결

• useUIStore에서 fontSize 상태를 읽어 동적으로 클래스 적용
• prose-sm 또는 prose-base 조건부 렌더링
• 페이지 이동 시 폰트 크기 깜빡임 방지를 위한 페이드인 효과 적용

노트/저널 페이지 스타일 통일

• 저널 페이지를 노트 페이지 기준으로 스타일 통일
• 래퍼 패딩, 카드 패딩, 제목 크기, 카드 간격 등 일치시킴